/**
 * 股票分析标签页组件
 * 用于展示股票的不同维度分析数据
 */
<template>
  <div class="analysis-tab">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="月度分析" name="monthly">
        <div class="chart-container">
          <div ref="monthlyChart" class="chart"></div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="止损分析" name="stopLoss">
        <div class="chart-container">
          <div ref="stopLossChart" class="chart"></div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="主力分析" name="mainForce">
        <div class="chart-container">
          <div ref="mainForceChart" class="chart"></div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { dealMoth } from '@/utils/stockUtils';
import { STOCK_CHART_OPTIONS } from '@/constants/chart';

export default {
  name: 'AnalysisTab',

  props: {
    // 月度分析数据
    monthlyData: {
      type: Array,
      default: () => [],
      validator: value => Array.isArray(value)
    },
    // 止损分析数据
    stopLossData: {
      type: Array,
      default: () => [],
      validator: value => Array.isArray(value)
    },
    // 主力分析数据
    mainForceData: {
      type: Array,
      default: () => [],
      validator: value => Array.isArray(value)
    }
  },

  data() {
    return {
      activeTab: 'monthly',
      monthlyChart: null,
      stopLossChart: null,
      mainForceChart: null
    };
  },

  watch: {
    monthlyData: {
      handler() {
        this.$nextTick(() => {
          this.initMonthlyChart();
        });
      },
      deep: true
    },
    stopLossData: {
      handler() {
        this.$nextTick(() => {
          this.initStopLossChart();
        });
      },
      deep: true
    },
    mainForceData: {
      handler() {
        this.$nextTick(() => {
          this.initMainForceChart();
        });
      },
      deep: true
    }
  },

  mounted() {
    this.initCharts();
    window.addEventListener('resize', this.handleResize);
  },

  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    this.destroyCharts();
  },

  methods: {
    /**
     * 初始化所有图表
     */
    initCharts() {
      this.initMonthlyChart();
      this.initStopLossChart();
      this.initMainForceChart();
    },

    /**
     * 初始化月度分析图表
     */
    initMonthlyChart() {
      if (!this.$refs.monthlyChart) return;

      if (!this.monthlyChart) {
        this.monthlyChart = echarts.init(this.$refs.monthlyChart);
      }

      const options = {
        ...STOCK_CHART_OPTIONS,
        title: {
          text: '月度分析'
        },
        series: [{
          type: 'line',
          data: this.monthlyData
        }]
      };

      this.monthlyChart.setOption(options);
    },

    /**
     * 初始化止损分析图表
     */
    initStopLossChart() {
      if (!this.$refs.stopLossChart) return;

      if (!this.stopLossChart) {
        this.stopLossChart = echarts.init(this.$refs.stopLossChart);
      }

      const options = {
        ...STOCK_CHART_OPTIONS,
        title: {
          text: '止损分析'
        },
        series: [{
          type: 'line',
          data: this.stopLossData
        }]
      };

      this.stopLossChart.setOption(options);
    },

    /**
     * 初始化主力分析图表
     */
    initMainForceChart() {
      if (!this.$refs.mainForceChart) return;

      if (!this.mainForceChart) {
        this.mainForceChart = echarts.init(this.$refs.mainForceChart);
      }

      const options = {
        ...STOCK_CHART_OPTIONS,
        title: {
          text: '主力分析'
        },
        series: [{
          type: 'line',
          data: this.mainForceData
        }]
      };

      this.mainForceChart.setOption(options);
    },

    /**
     * 处理窗口大小变化
     */
    handleResize() {
      this.monthlyChart?.resize();
      this.stopLossChart?.resize();
      this.mainForceChart?.resize();
    },

    /**
     * 销毁图表实例
     */
    destroyCharts() {
      this.monthlyChart?.dispose();
      this.stopLossChart?.dispose();
      this.mainForceChart?.dispose();
    }
  }
};
</script>

<style lang="scss" scoped>
.analysis-tab {
  width: 100%;
  height: 100%;

  .chart-container {
    width: 100%;
    height: 400px;
    margin-top: 20px;

    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style> 